import React from 'react';
import {Card, Button} from "antd";

import './Backlog.less';



export default class Backlog extends React.Component {

  static defaultProps={
    numb:0,
    data:[
      {img:require("./img/1.png"),text:'评委抽取',num:'01'},
      {img:require("./img/2.png"),text:'评委抽取',num:'01'},
      {img:require("./img/3.png"),text:'评委抽取',num:'01'},
    ],
  }



  render() {
    return (
      <Card title="待办事项" className="backlog-container flex">
        <div className=" flex-box flex-center flex">
          <div className="flex-box backlog-left ">
            <span>{this.props.numb}</span>
            <Button
              onClick={()=>this.props.onHandleHClick&&this.props.onHandleHClick()}
              className="backlog-left-button">办理</Button>
          </div>

          <div className="flex-box  backlog-right ">
            {
              this.props.data.map((item,index)=>{
                return(
                  <div
                    key={index}
                    onClick={()=>this.props.onItemClick&&this.props.onItemClick()}
                    className="backlog-right-item">
                    <div>
                      <img className="backlog-image" src={item.img}/>
                      <span className="backlog-right-item-2">{item.text}</span>
                      <span>{item.num}</span>
                    </div>
                  </div>
                )
                }
              )
            }
          </div>
        </div>


      </Card>
    )
  }
}
